<template>
	<div class="common-tools">
		<!-- <div 
			class="tools-l"
			:class="{ tools_back_act: BackAct == true }"
			@touchstart='BackTouchstart(true)'
			@touchend='BackTouchend()'
			@click="ToolsBack(ROUTERMOD)"
		>
			<span class="iconfont tools-back">
				&#xe675;
			</span>
		</div> -->
		<div class="tools-l">
			<input 
				type="text" 
				class="iconfont tools-l-input" 
				:placeholder="edit" 
				v-model="commentsTxt" 
			/>
		</div>
		<div class="tools-r">
			<div 
				class="published" 
				@click="addComments"
				:class="{ tools_active: ToolsAct == true }"
				@touchstart='toolsTouchstart(true)'
				@touchend='toolsTouchend()'
			>
				发表
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'common-tools',
		props: {
			ROUTERMOD: String,
			ToolsId: String,
			ToolsMod: String
		},
		data () {
			return {
				commentsTxt: '',
				ToolsAct: '',
				BackAct: '',
				is_routes: '',
				edit: '\ue66c  写点什么吧，来都来了~'
			}
		},
		methods: {
			BackTouchstart (tools_xb) {
				this.BackAct = tools_xb
			},
			BackTouchend () {
				this.BackAct = false
			},
			toolsTouchstart (tools_xb) {
				this.ToolsAct = tools_xb
			},
			toolsTouchend () {
				this.ToolsAct = false
			},
			ToolsBack (ROUTERMOD) {
				this.$router.push('/' + ROUTERMOD)
			},
			getRandom (num) {
				return Math.floor((Math.random()+Math.floor(Math.random()*9+1))*Math.pow(10,num-1));
			},
			addComments () {
				var _this = this		
				if (_this.commentsTxt == '') {
					//alert('输入你想说的')
					_this.$emit('toolsPrompt')
					return 
				}
				if (localStorage.getItem('user_name')) {
					var ctsName = localStorage.getItem('user_name'),
						ctsAvatar = localStorage.getItem('user_avatar'),
						ctsTag = '社区认证会员';
				} else {
					var ctsName = '游客' + _this.getRandom(10),
						ctsAvatar = 'http://avatar.bbs.miui.com/images/noavatar_big.gif',
						ctsTag = '初级权限用户';
				}
				var cts_params = {
					'cts_mod': _this.ToolsMod,
					'cts_id': _this.ToolsId,
					'cts_user': ctsName,
					'cts_avatar': ctsAvatar,
					'cts_tag': ctsTag,
					'cts_txt': _this.commentsTxt
				}
				axios({
					method: 'post',
					url: '/comments/addComments',
					data: cts_params
				})
				.then( response=> {
					_this.commentsTxt = ''
					_this.$emit('ToolsChange',response)
				})
				.catch( error=> {
					console.log('REQUEST ERROR:' + error)
				})	
			}
		},
		mounted () {
			//获取当前路径名
			var module_router = this.$route.params.mod
			this.is_routes = module_router
		}
	}
</script>
<style lang="stylus" scoped>
	.common-tools
		z-index:99
		width:750px
		height:106px
		background:#E6E6E6
		position:fixed
		bottom:0
		left:50%
		margin-left:-375px
		display:flex
		flex-direction:row
		.tools-l
			width:82%
			height:106px
			display:flex
			padding:0 0px 0 20px
			align-items:center
			.tools-l-input
				background:#fff
				border:none
				width:100%
				outline:none
				border-radius:8px
				padding:16px 20px
				font-size:28px
		.tools-r
			width:14%
			height:106px
			display:flex
			align-items:center
			justify-content:center
			padding:0 10px
			cursor:pointer
			.published
				font-size:28px
				padding:14px 0
				width:100%
				color:#308ee3
				text-align:center
				outline:none
				border:none
				cursor:pointer
				border-radius:6px
	.tools_back_act
		color: #fff
	.tools_active
		background-color: #888
</style>
